<!-- 细码组件 -->
<template>
  <view class="cx-fine-code flex flex-wrap">
    <view class="bor" @click="clickIpnut(item, index)" :class="{ 'back-4d': item.isActive }" v-for="(item, index) in arr"
      :key="index">
      {{ item.value }}
    </view>
    <!-- <view class="bor back-4d" @click="clickView" v-if="isActive">细码数</view> -->
    <cxCustomKeyboard ref="cxFineCodeCxCustomKeyboard" @delectFun="delectFun" :keyValue="cxCustomKeyboardValue" v-bind:visible="visible" @clickGap="clickGap" @close="close"
      @confirm="confirm" v-on:update:visible="handleVisibleUpdate" @keyFun="keyFun" @delCloth="delCloth">
    </cxCustomKeyboard>
  </view>
</template>

<script>
import cxCustomKeyboard from '@/components/cx-custom-keyboard/cx-custom-keyboard.vue'
export default {
  data() {
    return {
      visible: false, // 控制键盘的隐藏和显示
      arr: [], // 传入显示的数组
      isActive: true,//控制最后蓝色方框的显示和隐藏
      cxCustomKeyboardValue: [],//传入到键盘显示的数据
      index: 0,// 记录当前的坐标
    };
  },
  components: {
    cxCustomKeyboard,
  },
  props: {
    // 键盘数据回显
    valueArray: {
      type: Array,
      default: [],
    },
  },
  created() {
    this.arr = this.valueArray
  },
  methods: {
    // 删除布匹方法调用
    delCloth() {
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i].isActive) {
          this.arr.splice(i, 1)
          break
        }
      }
      if (this.arr.length <= 0) {
        this.isActive = true
      }
      this.$emit('delCloth', this.arr)
    },
    // 键盘按钮事件调用
    keyFun(value) {
      this.arr[this.index].value = this.arr[this.index].value + value
      this.$emit("keyFun", this.arr);
    },
    // 键盘删除事件调用
    delectFun(value) {
      this.arr[this.index].value = value.join("")
    },
    clickIpnut(item, index) {
      this.$emit('closeOtherKeyboard')
      this.arr.forEach(element => element.isActive = false);
      this.isActive = false
      item.isActive = true
      this.index = index
      this.cxCustomKeyboardValue = item.value.split(',')
      this.visible = true
    },
    // 点击取消按钮修改控制组件显隐的值
    handleVisibleUpdate(newValue) {
      this.visible = newValue;
    },
    // 点击取消按钮
    close() {
      // console.log('close');
      this.arr.splice(this.arr.length - 1, 1)
      this.visible = false
    },
    // 新增一个view
    clickView() {
      this.$emit('closeOtherKeyboard')
      this.arr.forEach(element => element.isActive = false);
      this.arr.push({ value: '', isActive: true })
      this.index = this.arr.length - 1
      this.visible = true
      this.isActive = false
    },
    // 点击确认按钮
    confirm() {
      this.cxCustomKeyboardValue = []
      this.index = this.arr.length
      this.$emit("confirm", this.arr);
      this.arr.forEach(element => element.isActive = false);
      this.arr.push({ value: '', isActive: true })
    },
    // 选择空差
    clickGap(item) {
      // console.log('clickGap', item);
    }
  },
};
</script>

<style lang="scss" scoped>
.bor {
  width: 105rpx;
  height: 60rpx;
  border: 1px solid #cdcdcd;
  border-radius: 10rpx;
  text-align: center;
  line-height: 60rpx;
  overflow-x: hidden;
  margin: 15rpx 15rpx 0;

}

.back-4d {
  background: #4da9ed;
  color: #fff;
  padding: 0 10rpx;
  font-size: 28rpx;
}
</style>
